<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 400px;
				height: 500px;
				border: 1px solid cornflowerblue;
				
			}
			.logo{
				margin: 30px 50px;
			}
			.user{
				float: right;
			}
			.screen input{
				width: 300px;
				height: 25px;
				background-color: #fff;
				border: 1px solid gray;
				margin: 0px 50px 30px 50px;
			}
			.keys{
				border: 1px solid gray;
				width: 300px;
				height: 280px;
				margin: 0px 50px 28px 50px;
			}
			.keys .buttons{
				height: 30px;
				width: 40px;
				margin: 20px 8px;
				padding: 0;
				text-align: center;
			}
			.footer{
				margin: 0px 50px 28px 50px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="logo">
			<span class="name">标准</span>
			<span class="user">@XXD</span>
			</div>
			<div id="input box">
				
			</div>
			<div class="screen">
				<input type="text" id="screenName" name="screenName" class="screen">
			</div>
			<div class="keys">
				<!--第一排-->
				<input type="button" id="7" onclick="calculator(this.id)" value="7" class="buttons"/>
				<input type="button" id="8" onclick="calculator(this.id)" value="8" class="buttons"/>
				<input type="button" id="9" onclick="calculator(this.id)" value="9" class="buttons"/>
				<input type="button" id="back" onclick="back()" value="back" class="buttons"/>
				<input type="button" id="c" onclick="clearNumber()" value="c" class="buttons"/>
				<!--第二排-->
				<input type="button" id="4" onclick="calculator(this.id)" value="4" class="buttons"/>
				<input type="button" id="5" onclick="calculator(this.id)" value="5" class="buttons"/>
				<input type="button" id="6" onclick="calculator(this.id)" value="6" class="buttons"/>
				<input type="button" id="×" onclick="calculator(this.id)" value="×" class="buttons"/>
				<input type="button" id="/" onclick="calculator(this.id)" value="/" class="buttons"/>
				<!--第三排-->
			    <input type="button" id="1" onclick="calculator(this.id)" value="1" class="buttons"/>
				<input type="button" id="2" onclick="calculator(this.id)" value="2" class="buttons"/>
				<input type="button" id="3" onclick="calculator(this.id)" value="3" class="buttons"/>
				<input type="button" id="+" onclick="calculator(this.id)" value="+" class="buttons"/>
				<input type="button" id="-" onclick="calculator(this.id)" value="-" class="buttons"/>
				<!--第四排-->
		        <input type="button" id="0" onclick="calculator(this.id)" value="0" class="buttons"/>
				<input type="button" id="00" onclick="calculator(this.id)" value="00" class="buttons"/>
				<input type="button" id="." onclick="calculator(this.id)" value="." class="buttons"/>
				<input type="button" id="%" onclick="calculator(this.id)" value="%" class="buttons"/>
				<input type="button" id="eva" onclick="eva()" value="=" class="buttons"/>
			</div>
			<div class="footer">
				<span class="ending">欢迎使用JavaScript计算器</span>
			</div>
			
		</div>
		
		<script type="text/javascript">
			var number = 0;
			function calculator(number){
				if(number=="%"){
					document.getElementById("screenName").value=Math.round(document.getElementById("screenName").value)/100;
				}else{
					document.getElementById("screenName").value+=document.getElementById(number).value;
				}
			}
			function eva(){
				document.getElementById("screenName").value=eval(document.getElementById("screenName").value);
			}
			function clearNumber(){
				document.getElementById("screenName").value=null;
				document.getElementById("screenName").focus();
			}
			function back(){
				var arr = document.getElementById("screenName");
				arr.value = arr.value.substring(0,arr.value.length-1);
			}
		</script>
	</body>
</html>
